<template>
  <el-dialog
    v-model="dialogVisible"
    title="预约详情"
    width="900px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div v-if="appointment" class="appointment-detail">
      <!-- 预约基本信息 -->
      <el-card class="info-card">
        <template #header>
          <div class="card-header">
            <span>预约信息</span>
            <div class="header-actions">
              <el-tag :type="getStatusType(appointment.status)" size="large">
                {{ getStatusText(appointment.status) }}
              </el-tag>
              <el-tag v-if="appointment.priority !== 'normal'" :type="getPriorityType(appointment.priority)" size="small">
                {{ getPriorityText(appointment.priority) }}
              </el-tag>
            </div>
          </div>
        </template>
        
        <div class="appointment-info">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="info-item">
                <label>预约ID：</label>
                <span class="appointment-id">{{ appointment.id }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <label>预约日期：</label>
                <span class="appointment-date">{{ formatDate(appointment.appointmentDate) }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <label>预约时间：</label>
                <span class="appointment-time">{{ appointment.appointmentTime }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <label>负责医生：</label>
                <span>{{ appointment.doctor || '待分配' }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <label>创建时间：</label>
                <span>{{ formatDateTime(appointment.createdAt) }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <label>最后更新：</label>
                <span>{{ formatDateTime(appointment.updatedAt) }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      
      <!-- 患者信息 -->
      <el-card class="info-card">
        <template #header>
          <div class="card-header">
            <span>患者信息</span>
            <el-button type="primary" size="small" text @click="handleViewPatient">
              <el-icon><View /></el-icon>
              查看详情
            </el-button>
          </div>
        </template>
        
        <div class="patient-info">
          <div class="patient-header">
            <el-avatar :size="60" :src="patientInfo.avatar">
              <el-icon size="30"><User /></el-icon>
            </el-avatar>
            <div class="patient-basic">
              <h3>{{ patientInfo.name }}</h3>
              <div class="patient-tags">
                <el-tag :type="patientInfo.gender === 'male' ? 'primary' : 'danger'" size="small">
                  {{ patientInfo.gender === 'male' ? '男' : '女' }}
                </el-tag>
                <el-tag type="info" size="small">{{ patientInfo.age }}岁</el-tag>
                <el-tag v-if="patientInfo.bloodType" type="warning" size="small">
                  {{ patientInfo.bloodType }}型血
                </el-tag>
              </div>
            </div>
          </div>
          
          <el-row :gutter="20" class="patient-details">
            <el-col :span="12">
              <div class="info-item">
                <label>手机号：</label>
                <span>{{ patientInfo.phone }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <label>身份证号：</label>
                <span>{{ patientInfo.idCard || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <label>邮箱：</label>
                <span>{{ patientInfo.email || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <label>职业：</label>
                <span>{{ patientInfo.occupation || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="info-item">
                <label>地址：</label>
                <span>{{ patientInfo.address || '-' }}</span>
              </div>
            </el-col>
          </el-row>
          
          <!-- 医疗信息 -->
          <div v-if="patientInfo.allergies || patientInfo.medicalHistory" class="medical-info">
            <el-divider content-position="left">医疗信息</el-divider>
            <div v-if="patientInfo.allergies" class="medical-item">
              <label>过敏史：</label>
              <el-tag type="warning" size="small">{{ patientInfo.allergies }}</el-tag>
            </div>
            <div v-if="patientInfo.medicalHistory" class="medical-item">
              <label>既往病史：</label>
              <span class="medical-text">{{ patientInfo.medicalHistory }}</span>
            </div>
          </div>
        </div>
      </el-card>
      
      <!-- 体检套餐信息 -->
      <el-card class="info-card">
        <template #header>
          <span>体检套餐</span>
        </template>
        
        <div class="package-info">
          <div class="package-header">
            <div class="package-basic">
              <h3>{{ packageInfo.name }}</h3>
              <el-tag type="success" size="large">¥{{ packageInfo.price }}</el-tag>
            </div>
            <p class="package-description">{{ packageInfo.description }}</p>
          </div>
          
          <div class="package-items">
            <h4>包含项目：</h4>
            <div class="items-grid">
              <div
                v-for="item in packageInfo.items"
                :key="item.id"
                class="item-card"
              >
                <div class="item-icon">
                  <el-icon><Document /></el-icon>
                </div>
                <div class="item-info">
                  <div class="item-name">{{ item.name }}</div>
                  <div class="item-description">{{ item.description }}</div>
                </div>
                <div class="item-status">
                  <el-tag
                    :type="getItemStatusType(item.status)"
                    size="small"
                  >
                    {{ getItemStatusText(item.status) }}
                  </el-tag>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
      
      <!-- 特殊要求和备注 -->
      <el-card v-if="appointment.specialRequirements || appointment.remark" class="info-card">
        <template #header>
          <span>特殊要求与备注</span>
        </template>
        
        <div class="requirements-info">
          <div v-if="appointment.specialRequirements" class="requirement-item">
            <h4>特殊要求：</h4>
            <div class="requirement-content">
              {{ appointment.specialRequirements }}
            </div>
          </div>
          
          <div v-if="appointment.remark" class="requirement-item">
            <h4>备注信息：</h4>
            <div class="requirement-content">
              {{ appointment.remark }}
            </div>
          </div>
        </div>
      </el-card>
      
      <!-- 操作记录 -->
      <el-card class="info-card">
        <template #header>
          <span>操作记录</span>
        </template>
        
        <div class="operation-timeline">
          <el-timeline>
            <el-timeline-item
              v-for="record in operationRecords"
              :key="record.id"
              :timestamp="formatDateTime(record.timestamp)"
              placement="top"
            >
              <div class="timeline-content">
                <div class="operation-header">
                  <span class="operation-type">{{ record.operation }}</span>
                  <span class="operator">{{ record.operator }}</span>
                </div>
                <div v-if="record.description" class="operation-description">
                  {{ record.description }}
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-card>
      
      <!-- 体检进度 -->
      <el-card v-if="appointment.status === 'in_progress' || appointment.status === 'completed'" class="info-card">
        <template #header>
          <span>体检进度</span>
        </template>
        
        <div class="progress-info">
          <div class="progress-header">
            <span>整体进度</span>
            <span class="progress-text">{{ checkupProgress.completed }}/{{ checkupProgress.total }}</span>
          </div>
          <el-progress
            :percentage="Math.round((checkupProgress.completed / checkupProgress.total) * 100)"
            :stroke-width="8"
            :text-inside="true"
          />
          
          <div class="progress-items">
            <div
              v-for="item in checkupProgress.items"
              :key="item.id"
              class="progress-item"
            >
              <div class="progress-item-header">
                <span class="item-name">{{ item.name }}</span>
                <el-tag
                  :type="getProgressStatusType(item.status)"
                  size="small"
                >
                  {{ getProgressStatusText(item.status) }}
                </el-tag>
              </div>
              <div v-if="item.result" class="item-result">
                <span class="result-label">结果：</span>
                <span class="result-value">{{ item.result }}</span>
              </div>
              <div v-if="item.remark" class="item-remark">
                <span class="remark-label">备注：</span>
                <span class="remark-value">{{ item.remark }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        
        <el-button
          v-if="appointment.status === 'pending'"
          type="success"
          @click="handleConfirm"
        >
          <el-icon><Check /></el-icon>
          确认预约
        </el-button>
        
        <el-button
          v-if="['pending', 'confirmed'].includes(appointment.status)"
          type="warning"
          @click="handleEdit"
        >
          <el-icon><Edit /></el-icon>
          编辑预约
        </el-button>
        
        <el-button
          v-if="appointment.status === 'confirmed'"
          type="primary"
          @click="handleStart"
        >
          <el-icon><VideoPlay /></el-icon>
          开始体检
        </el-button>
        
        <el-button
          v-if="!['completed', 'cancelled'].includes(appointment.status)"
          type="danger"
          @click="handleCancel"
        >
          <el-icon><Close /></el-icon>
          取消预约
        </el-button>
        
        <el-button type="info" @click="handlePrint">
          <el-icon><Printer /></el-icon>
          打印
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

// Props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  appointment: {
    type: Object,
    default: null
  }
})

// Emits
const emit = defineEmits(['update:visible', 'edit', 'confirm', 'cancel'])

// 模拟患者信息
const patientInfo = ref({
  id: 1,
  name: '张三',
  phone: '13800138001',
  gender: 'male',
  age: 35,
  idCard: '110101198901010001',
  email: 'zhangsan@example.com',
  occupation: '软件工程师',
  address: '北京市朝阳区某某街道123号',
  bloodType: 'A',
  allergies: '青霉素过敏',
  medicalHistory: '高血压病史3年，目前服用降压药控制',
  avatar: ''
})

// 模拟套餐信息
const packageInfo = ref({
  id: 1,
  name: '基础体检套餐',
  price: 299,
  description: '适合年轻人的基础体检项目，包含常规检查和基本化验，能够及时发现常见健康问题',
  items: [
    {
      id: 1,
      name: '血常规',
      description: '检查血液中各种细胞的数量和形态',
      status: 'completed'
    },
    {
      id: 2,
      name: '尿常规',
      description: '检查尿液中的各种成分',
      status: 'completed'
    },
    {
      id: 3,
      name: '心电图',
      description: '检查心脏的电活动',
      status: 'in_progress'
    },
    {
      id: 4,
      name: '胸部X光',
      description: '检查胸部器官的影像',
      status: 'pending'
    },
    {
      id: 5,
      name: '肝功能',
      description: '检查肝脏功能指标',
      status: 'pending'
    }
  ]
})

// 模拟操作记录
const operationRecords = ref([
  {
    id: 1,
    operation: '创建预约',
    operator: '系统',
    timestamp: '2024-01-15 10:30:00',
    description: '患者通过系统创建预约'
  },
  {
    id: 2,
    operation: '确认预约',
    operator: '李护士',
    timestamp: '2024-01-16 09:15:00',
    description: '护士确认预约信息，安排体检时间'
  },
  {
    id: 3,
    operation: '开始体检',
    operator: '张医生',
    timestamp: '2024-01-20 09:00:00',
    description: '患者到达体检中心，开始体检流程'
  }
])

// 模拟体检进度
const checkupProgress = ref({
  total: 5,
  completed: 2,
  items: [
    {
      id: 1,
      name: '血常规',
      status: 'completed',
      result: '各项指标正常',
      remark: '血红蛋白略低，建议补充铁质'
    },
    {
      id: 2,
      name: '尿常规',
      status: 'completed',
      result: '正常',
      remark: ''
    },
    {
      id: 3,
      name: '心电图',
      status: 'in_progress',
      result: '',
      remark: '正在检查中'
    },
    {
      id: 4,
      name: '胸部X光',
      status: 'pending',
      result: '',
      remark: ''
    },
    {
      id: 5,
      name: '肝功能',
      status: 'pending',
      result: '',
      remark: ''
    }
  ]
})

// 计算属性
const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 方法
const handleClose = () => {
  dialogVisible.value = false
}

const handleEdit = () => {
  emit('edit', props.appointment)
}

const handleConfirm = () => {
  emit('confirm', props.appointment)
}

const handleCancel = () => {
  emit('cancel', props.appointment)
}

const handleStart = () => {
  ElMessage.info('开始体检功能待实现')
}

const handlePrint = () => {
  ElMessage.info('打印功能待实现')
}

const handleViewPatient = () => {
  ElMessage.info('查看患者详情功能待实现')
}

const getStatusType = (status) => {
  const statusMap = {
    pending: 'warning',
    confirmed: 'primary',
    in_progress: 'primary',
    completed: 'success',
    cancelled: 'danger'
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = {
    pending: '待确认',
    confirmed: '已确认',
    in_progress: '进行中',
    completed: '已完成',
    cancelled: '已取消'
  }
  return statusMap[status] || '未知'
}

const getPriorityType = (priority) => {
  const priorityMap = {
    normal: 'info',
    urgent: 'warning',
    emergency: 'danger'
  }
  return priorityMap[priority] || 'info'
}

const getPriorityText = (priority) => {
  const priorityMap = {
    normal: '普通',
    urgent: '紧急',
    emergency: '急诊'
  }
  return priorityMap[priority] || '普通'
}

const getItemStatusType = (status) => {
  const statusMap = {
    pending: 'info',
    in_progress: 'warning',
    completed: 'success',
    cancelled: 'danger'
  }
  return statusMap[status] || 'info'
}

const getItemStatusText = (status) => {
  const statusMap = {
    pending: '待检查',
    in_progress: '检查中',
    completed: '已完成',
    cancelled: '已取消'
  }
  return statusMap[status] || '未知'
}

const getProgressStatusType = (status) => {
  const statusMap = {
    pending: 'info',
    in_progress: 'warning',
    completed: 'success',
    cancelled: 'danger'
  }
  return statusMap[status] || 'info'
}

const getProgressStatusText = (status) => {
  const statusMap = {
    pending: '待检查',
    in_progress: '检查中',
    completed: '已完成',
    cancelled: '已取消'
  }
  return statusMap[status] || '未知'
}

const formatDate = (date) => {
  if (!date) return ''
  return new Date(date).toLocaleDateString('zh-CN')
}

const formatDateTime = (dateTime) => {
  if (!dateTime) return ''
  const date = new Date(dateTime)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}
</script>

<style scoped>
.appointment-detail {
  max-height: 70vh;
  overflow-y: auto;
}

.info-card {
  margin-bottom: 20px;
}

.info-card:last-child {
  margin-bottom: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.appointment-info {
  padding: 0;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  line-height: 1.5;
}

.info-item label {
  font-weight: 500;
  color: #606266;
  min-width: 80px;
  margin-right: 8px;
}

.info-item span {
  color: #2c3e50;
  flex: 1;
}

.appointment-id {
  font-family: 'Monaco', 'Menlo', monospace;
  background: #f5f7fa;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.appointment-date,
.appointment-time {
  font-weight: 600;
  color: #409EFF;
}

.patient-info {
  padding: 0;
}

.patient-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
}

.patient-basic h3 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
}

.patient-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.patient-details {
  margin-bottom: 16px;
}

.medical-info {
  margin-top: 16px;
}

.medical-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 8px;
}

.medical-item label {
  font-weight: 500;
  color: #606266;
  min-width: 80px;
}

.medical-text {
  color: #2c3e50;
  line-height: 1.6;
}

.package-info {
  padding: 0;
}

.package-header {
  margin-bottom: 20px;
}

.package-basic {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.package-basic h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
}

.package-description {
  color: #606266;
  margin: 0;
  line-height: 1.6;
}

.package-items h4 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 16px;
}

.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.item-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #ebeef5;
}

.item-icon {
  width: 32px;
  height: 32px;
  background: #409EFF;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
}

.item-info {
  flex: 1;
  min-width: 0;
}

.item-name {
  font-weight: 500;
  color: #2c3e50;
  margin-bottom: 4px;
}

.item-description {
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
}

.item-status {
  flex-shrink: 0;
}

.requirements-info {
  padding: 0;
}

.requirement-item {
  margin-bottom: 16px;
}

.requirement-item:last-child {
  margin-bottom: 0;
}

.requirement-item h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 14px;
  font-weight: 500;
}

.requirement-content {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
  color: #2c3e50;
  line-height: 1.6;
  border-left: 4px solid #409EFF;
}

.operation-timeline {
  padding: 0 20px;
}

.timeline-content {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #ebeef5;
}

.operation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.operation-type {
  font-weight: 500;
  color: #2c3e50;
}

.operator {
  font-size: 12px;
  color: #909399;
}

.operation-description {
  font-size: 12px;
  color: #606266;
  line-height: 1.4;
}

.progress-info {
  padding: 0;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.progress-text {
  font-weight: 600;
  color: #409EFF;
}

.progress-items {
  margin-top: 20px;
}

.progress-item {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  margin-bottom: 12px;
  border: 1px solid #ebeef5;
}

.progress-item:last-child {
  margin-bottom: 0;
}

.progress-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.item-name {
  font-weight: 500;
  color: #2c3e50;
}

.item-result,
.item-remark {
  display: flex;
  align-items: flex-start;
  margin-bottom: 4px;
  font-size: 12px;
}

.item-result:last-child,
.item-remark:last-child {
  margin-bottom: 0;
}

.result-label,
.remark-label {
  color: #606266;
  min-width: 40px;
  margin-right: 8px;
}

.result-value,
.remark-value {
  color: #2c3e50;
  line-height: 1.4;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-timeline-item__timestamp) {
  color: #909399;
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  :deep(.el-dialog) {
    width: 95% !important;
    margin: 5vh auto;
  }
  
  .patient-header {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .patient-basic {
    text-align: center;
  }
  
  .patient-tags {
    justify-content: center;
  }
  
  .package-basic {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .items-grid {
    grid-template-columns: 1fr;
  }
  
  .item-card {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
  
  .operation-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .progress-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .progress-item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .dialog-footer {
    flex-direction: column;
  }
  
  .dialog-footer .el-button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  :deep(.el-dialog) {
    width: 100% !important;
    margin: 0;
    height: 100vh;
    border-radius: 0;
  }
  
  :deep(.el-dialog__header) {
    padding: 15px 20px;
  }
  
  :deep(.el-dialog__body) {
    padding: 10px 20px;
    height: calc(100vh - 120px);
    overflow-y: auto;
  }
  
  :deep(.el-dialog__footer) {
    padding: 15px 20px;
  }
  
  .info-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .info-item label {
    min-width: auto;
    margin-right: 0;
    margin-bottom: 4px;
  }
  
  .medical-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .medical-item label {
    min-width: auto;
    margin-bottom: 4px;
  }
}
</style>